<template>
  <div class="main">
    <div id="swiper-wrapper">
      <swiper ref="mySwiper" :options="swiperOptions" @click-slide="handleClickSlide">
        <swiper-slide class="swiper-slide" v-for="(item,index) in banners" :key=index>
          <v-img class="banner_img" :src="item"></v-img>
        </swiper-slide>
      </swiper>
    </div>
  </div>
</template>
<script>
import {Swiper, SwiperSlide} from 'vue-awesome-swiper'
import 'swiper/css/swiper.css'

import image1 from '../assets/banner/1.jpeg'
import image2 from '../assets/banner/2.jpeg'
import image3 from '../assets/banner/3.jpeg'
import image4 from '../assets/banner/4.jpeg'

export default {
  name: "",
  components: {
    Swiper,
    SwiperSlide
  },
  data() {
    return {
      swiperOptions: {
        centeredSlides: true,
        autoplay: {
          delay: 2500,
          disableOnInteraction: false
        },
        grabCursor: true
      },
      banners: [
        image1,
        image2,
        image3,
        image4
      ]
    }
  },
  computed: {},
  mounted() {
  },
  methods: {
    handleClickSlide(index) {
      console.log(index)
    }
  }
}
</script>


<style scoped>
#swiper-wrapper {
  width: 100%;
  height: 20vh;
  padding: 10px 20px;
  opacity: .8;
}

.swiper-slide {
  justify-content: center;
}

.banner_img {
  border-radius: 10px;
  width:90vw;
  height: 15vh;
}
</style>